<template>
    <div class="exchangeContent">
        <div class="exchangeBox">
            <van-field
                v-model="selectNameBefore"
                is-link
                readonly
                label="货币"
                placeholder="请选择货币类型"
                @click="showBeforePicker = true"
            />
            <van-field v-if="selectValueBefore" border v-model="beforeValue" type="number" label="金额" placeholder="请输入金额" />
        </div>
        <div class="exchangeBtn" v-if="selectNameBefore" @click="handlerExchangeBtn">
            <SvgIcon width="80px" height="80px" name="exchangeBtn" color="#f5c3cb"></SvgIcon>
        </div>
        <div class="exchangeBox">
            <van-field
                v-model="selectNameAfter"
                is-link
                readonly
                label="货币"
                placeholder="请选择货币类型"
                @click="showAfterPicker = true"
                v-if="selectNameBefore"
            />
            <van-field v-if="selectValueBefore && beforeValue && selectValueAfter && showReslut && afterValue" border v-model="afterValue" readonly type="number" label="金额" placeholder="请输入金额" />
        </div>
        <van-popup v-model:show="showBeforePicker" destroy-on-close round position="bottom">
            <van-picker
                title="请选择货币"
                :columns="exchangeList()"
                :columns-field-names="columnsFieldName"
                @change="onChange"
                @cancel="onCancelBefore"
                @confirm="onConfirmBefore"
            />
        </van-popup>
        <van-popup v-model:show="showAfterPicker" destroy-on-close round position="bottom">
            <van-picker
                title="请选择货币"
                :columns="exchangeList()"
                :columns-field-names="columnsFieldName"
                @change="onChange"
                @cancel="onCancelAfter"
                @confirm="onConfirmAfter"
            />
        </van-popup>
    </div>
</template>
    
<script setup lang="ts">
import { ref, onMounted, computed, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast, showFailToast, showConfirmDialog } from 'vant'
import { exchangeList } from '@/utils/plugins'
import request from '@/utils/request'

const route = useRoute()
const router = useRouter()

const showBeforePicker = ref<boolean>(false)
const showAfterPicker = ref<boolean>(false)
const selectNameBefore = ref<string>('')
const selectNameAfter = ref<string>('')
const selectValueBefore = ref<string>('')
const selectValueAfter = ref<string>('')
const beforeValue = ref<string>('')
const afterValue = ref<string>('')

const showReslut = ref<boolean>(false)



const columnsFieldName = {
    text: 'name',
    value: 'code'
}

const onChange = (item) => {
    console.log(item)
};

const onCancelBefore = () => {
    // 关闭选择器
    showBeforePicker.value = false;
};

const onCancelAfter = () => {
    // 关闭选择器
    showAfterPicker.value = false;
};

const onConfirmBefore = ({selectedValues, selectedOptions}) => {
    console.log('312', {selectedValues, selectedOptions})
    // 确认选择
    showBeforePicker.value = false;
    selectNameBefore.value = selectedOptions[0].name;
    selectValueBefore.value = selectedValues[0] || selectedOptions[0].code;
};

const onConfirmAfter  = ({selectedValues, selectedOptions}) => {
    // 确认选择
    showAfterPicker.value = false;
    selectNameAfter.value = selectedOptions[0].name;
    selectValueAfter.value = selectedValues[0] || selectedOptions[0].code;
};

const reqExchangeInfo = (data: any) => request.post<any, any>(`https://route.showapi.com/105-31?showapi_appid=1783553&showapi_sign=40ebc3ff09fd4a08979bfc421db31f7d&data=0424&fromCode=${selectValueBefore.value}&toCode=${selectValueAfter.value}&money=${beforeValue.value.toString()}`, data)
const handlerExchangeBtn = () => {
    if (selectValueBefore.value == '' || selectValueAfter.value == '') {
        showToast('请选择货币类型后再进行转换操作')
        return
    }
    if (beforeValue.value == '') {
        showToast('请输入金额')
        return
    }
    showConfirmDialog({
        title: '',
        confirmButtonColor: '#bca1f3',
        message: '确定要开始转换吗？',
    })
    .then(() => {
        showReslut.value = true
        reqExchangeInfo({
            // showapi_appid: '1505398', //这里需要改成自己的appid
            // showapi_sign: '38a5f6fb1abe4355bc2f0d5435372138',  //这里需要改成自己的应用的密钥secret
            fromCode: selectValueBefore.value,
            toCode: selectValueAfter.value,
            money: beforeValue.value.toString()
        }).then(res => {
        console.log('res', res)
        if (res.showapi_res_body.ret_code == 0) {
            afterValue.value  = res.showapi_res_body.money
        } else {
            showFailToast(res.showapi_res_error || res.showapi_res_body.remark || '转换失败')
        }
        })
    })
    .catch(() => {
        // on cancel
    });
}


onMounted(() => {

})

</script>


<style lang="scss" scoped>
.exchangeContent {
    width: 100%;
    position: relative;
    padding: 15px;
    .exchangeBox {

    }
    .exchangeBtn {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 50px 0;
    }
}
</style>